<template>
	<view>
		<!-- 头部 -->
		<yHeader :current="3" :screenWidth="screenWidth" @Tabs="handleTabs"></yHeader>
		<!-- 内容 -->
		<view class="__inner">
			<!-- h3标题 -->
			<view class="my-1">
				<text class="h3" :class="'text-' + ThemeColors">采购详情</text>
			</view>
			<view class="flex flex-column mb-4 border box border-brown" style="height: 450rpx">
				<view class="flex-shrink px-4 bg-lightbrown flex align-center" style="height: 80rpx">
					<text class="font font-weight-bold">采购品种：{{ FormData.Data.Article_Name }}</text>
				</view>
				<view class="flex px-4 pb-2" style="height: 100%">
					<view class="flex flex-column justify-between" style="width: 50%; height: 100%">
						<view class="flex align-center" style="height: 25%">
							<text class="font">采购数量：{{ FormData.Data.Total_Quantity
                }}{{ FormData.Data.Unit }}</text>
						</view>
						<!-- <view class="flex align-center" style="height: 25%;">
							<text class="font">期望货源地：全国</text>
						</view> -->
						<view class="flex align-center" style="height: 25%">
							<text class="font">收获地：/{{ FormData.Data.Transaction_Location }}</text>
						</view>
						<view class="flex align-center" style="height: 25%">
							<text class="font">补充说明：木耳</text>
						</view>
					</view>
					<!-- 右 -->
					<view class="flex flex-column" style="width: 50%; height: 100%; position: relative">
						<view class="flex align-center" style="height: 25%">
							<text class="font">发布采购时间：{{ FormData.Data.Delivery_Time }}</text>
						</view>
						<view class="flex align-center" style="height: 25%">
							<text class="font">浏览次数：{{ FormData.Browsing }}次</text>
						</view>
						<view v-if="
                FormData.Data.Enterprise_Info_SerialNumber !=
                Enterprise_Info_SerialNumber
              " class="flex flex-column">
							<view @click="handleServer(true)" class="flex justify-center align-center rounded-lg"
								:class="'bg-' + ThemeColors" style="
                  cursor: pointer;
                  width: 350rpx;
                  height: 80rpx;
                  position: absolute;
                  left: 0;
                  bottom: 50rpx;
                ">
								<text class="font-md font-weight-bold text-white">联系买家</text>
							</view>
							<view v-if="FormData.Data.Residue_Quantity > 0" @click="handleOrder()"
								class="flex justify-center align-center rounded-lg" :class="'bg-' + ThemeColors" style="
                  cursor: pointer;
                  width: 350rpx;
                  height: 80rpx;
                  position: absolute;
                  left: 380rpx;
                  bottom: 50rpx;
                ">
								<text class="font-md font-weight-bold text-white">提交申请</text>
							</view>
							<view v-else class="flex justify-center align-center rounded-lg" :class="'bg-danger'" style="
                  cursor: pointer;
                  width: 350rpx;
                  height: 80rpx;
                  position: absolute;
                  left: 0;
                  bottom: 50rpx;
                ">
								<text class="font-md font-weight-bold text-white">对方已停止采购</text>
							</view>
						</view>
						<view v-else class="flex flex-column">
							<view class="flex justify-center align-center rounded-lg" :class="'bg-' + ThemeColors"
								style="
                  cursor: pointer;
                  width: 350rpx;
                  height: 80rpx;
                  position: absolute;
                  left: 380rpx;
                  bottom: 50rpx;
                ">
								<text class="font-md font-weight-bold text-white">本企发布</text>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="flex flex-column mb-4 border box border-brown" style="height: 350rpx">
				<view class="flex-shrink px-4 bg-lightbrown flex align-center" style="height: 80rpx">
					<text class="font font-weight-bold">采购商信息</text>
				</view>
				<view class="flex mx-4 mt-2 mb-4 align-center" style="height: 100%; justify-content: space-around"
					@click="
            handleTabs(
              `/pages/detail/enterprise-detail?id=` +
                FormData.Data.Enterprise_Info_SerialNumber
            )
          ">
					<!-- logo -->
					<view class="flex-shrink" style="width: 100rpx; height: 100rpx">
						<image v-if="FormData.Data.Enterprise_Logo != void 0" class="rounded-circle"
							style="width: 100%; height: 100%" :src="Domain_Business + FormData.Data.Enterprise_Logo"
							mode="">
						</image>
					</view>
					<view class="ml-2 flex flex-column justify-between">
						<view class="flex align-center" style="height: 34%">
							<text class="font">姓名：{{ FormData.Data.Contacts }}</text>
						</view>
					</view>
					<view class="ml-2 flex flex-column justify-between">
						<view class="flex align-center" style="height: 34%">
							<text class="font">企业名称：{{ FormData.Data.Enterprise_Name }}</text>
						</view>
					</view>
					<view class="ml-2 flex flex-column justify-between">
						<view class="flex align-center" style="height: 34%">
							<text class="font">联系电话：{{ FormData.Data.Contacts_Phone }}</text>
						</view>
					</view>
					<view class="ml-2 flex flex-column justify-between">
						<view class="flex align-center" style="height: 34%">
							<text class="font">采购时间：{{ FormData.Data.Delivery_Time }}</text>
						</view>
					</view>
				</view>
			</view>
			<view class="flex flex-column mb-4 border box border-brown" style="height: 450rpx">
				<view class="flex-shrink px-4 bg-lightbrown flex align-center"
					style="height: 80rpx; position: relative">
					<text class="font font-weight-bold">同行报价</text>
					<text v-if="false" class="font-sm" :class="'text-' + ThemeColors"
						style="position: absolute; right: 40rpx">查看更多&gt;</text>
				</view>
				<view v-if="tableData2.length == 0" style="height: 500rpx"
					class="text-muted flex align-center justify-center">
					暂无相关交易同行报价信息
				</view>
				<view v-if="tableData2.length != 0" class="flex flex-column mx-10 mt-2 mb-4" style="height: 100%">
					<!-- 表头 -->
					<view class="flex" style="width: 100%; height: 30%">
						<view class="flex align-center" style="width: 34%">
							<text class="font text-muted">供应商</text>
						</view>
						<view class="flex align-center" style="width: 34%">
							<text class="font text-muted">同行报价</text>
						</view>
						<view class="flex justify-end align-center" style="width: 34%">
							<text class="font text-muted">报价时间</text>
						</view>
					</view>
					<!-- 表身 -->
					<view class="flex flex-column" style="width: 100%; height: 70%">
						<view v-for="(item, i) in tableData2" :key="i" class="flex" style="width: 100%; height: 34%">
							<view class="flex align-center" style="width: 34%">
								<text class="font">{{ item.Seller_Contact }}</text>
							</view>
							<view class="flex align-center" style="width: 34%">
								<text class="font"><text
										class="text-danger">{{ item.Amount }}</text>元/{{ item.Unit }}</text>
							</view>
							<view class="flex justify-end align-center" style="width: 34%">
								<text class="font">{{ item.Submission_Time }}</text>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="flex flex-column mb-4 border box border-brown" style="height: 700rpx">
				<view class="flex-shrink px-4 bg-lightbrown flex align-center"
					style="height: 80rpx; position: relative">
					<text class="font font-weight-bold">木耳行情</text>
					<text v-if="false" class="font-sm" :class="'text-' + ThemeColors"
						style="position: absolute; right: 40rpx">查看更多&gt;</text>
				</view>
				<view class="flex mx-4 my-2" style="height: 100%">
					<!-- echarts -->
					<view style="width: 65%">
						<qiun-data-charts type="area" :opts="opts" :chartData="chartData" />
					</view>
					<!-- 文字数据 -->
					<view style="width: 35%">
						<view class="flex flex-column" style="height: 45%">
							<view class="flex-shrink px-2 bg-lightbrown flex align-center" style="height: 80rpx">
								<text class="font font-weight-bold">当日价格</text>
							</view>
							<view class="mx-2" style="height: 100%">
								<view class="flex align-center" style="height: 50%">
									<text class="font">当日均价（元/吨）：{{ Market_Data.Daily_average_price }}元</text>
								</view>
								<view class="flex align-center" style="height: 50%">
									<text class="font">相对比前日：下跌{{Market_Data.fall}}元，跌幅{{Market_Data.Decline}}%</text>
								</view>
							</view>
						</view>
						<view class="flex flex-column" style="height: 55%">
							<view class="flex-shrink px-2 bg-lightbrown flex align-center" style="height: 80rpx">
								<text class="font font-weight-bold">近7日价格</text>
							</view>
							<view class="flex flex-column mx-2" style="height: 100%">
								<view class="flex align-center" style="height: 50%">
									<text class="font">近7日最高价（元/吨）：{{Market_Data.max_price}}元</text>
								</view>
								<view class="flex align-center" style="height: 50%">
									<text class="font">近7日最低价（元/吨）：{{Market_Data.min_price}}元</text>
								</view>
								<view class="flex align-center" style="height: 50%">
									<text class="font">近7日均价（元/吨）：{{ Market_Data.avg_price }}元</text>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="my-1">
				<text class="h3" :class="'text-' + ThemeColors">热门采购</text>
			</view>
			<view class="flex flex-column mb-4 border box border-brown" style="height: 500rpx">
				<!-- 表头 -->
				<view class="flex-shrink px-4 bg-lightbrown flex align-center" style="height: 80rpx">
					<view style="width: 100%">
						<text class="font font-weight-bold">采购品种</text>
					</view>
					<view style="width: 100%">
						<text class="font font-weight-bold">采购数量</text>
					</view>
					<view style="width: 100%">
						<text class="font font-weight-bold">期待货源地</text>
					</view>
					<view style="width: 100%">
						<text class="font font-weight-bold">发布人</text>
					</view>
					<view style="width: 100%">
						<text class="font font-weight-bold">认证情况</text>
					</view>
					<view style="width: 100%">
						<text class="font font-weight-bold">操作</text>
					</view>
				</view>
				<!-- 表体 -->
				<view class="flex flex-column" style="width: 100%; height: 100%">
					<view v-for="(item, i) in tableData" :key="i" class="mx-4 flex align-center box"
						:class="i != 1 ? 'border-top border-lightbrown' : ''" style="height: 20%"
						@click.stop="handleDetail(item)">
						<view style="width: 100%">
							<text class="font hover" @click.stop="handleDetail(item)">{{
                item.Article_Name
              }}</text>
						</view>
						<view style="width: 100%">
							<text class="font hover"
								@click.stop="handleDetail(item)">{{ item.Total_Quantity }}{{ item.Unit }}</text>
						</view>
						<view style="width: 100%">
							<text class="font hover" @click.stop="handleDetail(item)">全国</text>
						</view>
						<view style="width: 100%">
							<text class="font hover" @click.stop="handleDetail(item)">{{
                item.Contacts
              }}</text>
						</view>
						<view style="width: 100%">
							<text class="font hover" @click.stop="handleDetail(item)">已认证</text>
						</view>
						<view style="width: 100%">
							<text @click.stop="handleDetail(item)" class="font hover"
								:class="'text-' + ThemeColors">查看详情</text>
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 底部 -->
		<yFooter Show v-if="screenWidth > 480" :bg="'bg_white'" :screenWidth="screenWidth"></yFooter>
		<!-- 与买家联系 -->
		<view v-if="isServer" class="flex flex-column serve-mask bg-white shadow border position-relative"
			:class="'border-' + ThemeColors">
			<view class="flex-shrink shadow flex align-center border-bottom border-grey" style="height: 80rpx">
				<text class="px-2 font font-weight-bold border-left" :class="'border-' + ThemeColors"
					style="border-left-width: 8rpx">企业名称</text>
				<text @click="handleServer(false)" class="font-sm text-muted"
					style="cursor: pointer; position: absolute; right: 20rpx">关闭</text>
			</view>
			<view class="flex flex-column mb-4" style="height: 100%">
				<view class="w-100" style="height: 100%; width: 99%">
					<scroll-view :scroll-top="scrollTop" :scroll-with-animation="true" :scroll-y="true" id="msglistview"
						class="bg-light scroll-view a" style="height: 90%;border: 2rpx solid #eee;overflow-y: scroll;w">
						<view class="chat-body">
							<view v-for="(item_, index) in msgList" :key="index">
								<view class="item self flex align-center" v-if="item_.userContent != ''">
									<view class="text-center">
										<text class="font-small">{{ item_.time }}</text>
										<view class="content right">
											{{ item_.userContent }}
										</view>
									</view>
									<view class="flex flex-column align-center">
										<image mode="widthFix" style="width: 70rpx" class="avatar"
											src="../../static/icon/1.png">
										</image>
									</view>
								</view>
								<view class="item Ai" v-if="item_.botContent != ''">
									<view class="flex flex-column align-center">
										<image mode="widthFix" style="width: 70rpx" class="avatar"
											src="../../static/icon/1.png">
										</image>
									</view>
									<view class="flex flex-column align-center ml-3">
										<text class="font-small">{{ item_.time }}</text>
										<view class="content left">
											{{ item_.botContent }}
										</view>
									</view>
								</view>
							</view>
						</view>
					</scroll-view>
				</view>
			</view>
			<view class="shadow flex-shrink flex align-center bg-lightbrown w-100 border-top border-grey"
				style="height: 90rpx; position: absolute; bottom: -90rpx">
				<textarea v-model="chatMsg" class="px-2 py-1 w-100" style="height: 100%"
					placeholder-class="font text-hover-light" placeholder="请输入您要说的话"></textarea>
				<view @click="handleSend()" class="hover mr-2 flex-shrink rounded-lg flex align-center justify-center"
					:class="'bg-' + ThemeColors" style="width: 100rpx; height: 80%">
					<text class="font text-white">发送</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	const app = getApp();
	import times from "@/static/js/utils.js";
	import yHeader from "@/components/yHeader.vue";
	import yFooter from "@/components/yFooter.vue";
	import {
		Message
	} from "element-ui";
	import {
		GroupServesHistory,
		getGroupSeekProcureID,
		GroupSeekProcureAll,
		GroupSeekProcureAllAction,
		GroupMarketQuotations,
	} from "@/api/group.js";
	import {
		getGroupSeekTransactionAll
	} from "@/api/purchasedgoods.js";
	import {
		GoodsFileAdd,
		getAddAction,
		getJsonInquiry
	} from "@/api/global.js";
	import {
		accSub,
	} from "@/static/js/GeneralUtil.js";
	export default {
		components: {
			yHeader,
			yFooter,
		},
		data() {
			return {
				Market_Data: {
					Daily_average_price: "", //当均价
					fall: "", //当下跌
					Decline: "", //当跌幅
					max_price: "", //7最高价
					min_price: "" ,//7最低价
					avg_price: "" //7均价
				},
				FormData: {
					Data: {},
				},
				form: {
					Article_Name: "",
					Category_SerialNumber: "",
					Enterprise_Info_SerialNumber: "",
					Type: "0",
					token: "",
					page: 1, //页数
					limit: 5, //每页数据条数
				},
				Enterprise_Info_SerialNumber: "",
				Enterprise_Info_SerialNumber2: "",
				Group_Seek_Purchase_SerialNumber: "",
				tableData: [],
				tableData2: [],
				total: 0,
				screenWidth: uni.getSystemInfoSync().windowWidth,
				Domain_Business: app.globalData.Domain_Business,
				ThemeColors: app.globalData.ThemeColors,
				isServer: false, //聊天遮罩层
				scrollTop: 0,
				msgList: [],
				chartData: {},
				chatMsg: "",
				BrowseHistory: {
					Group_Browse_SerialNumber: "",
					Group_SerialNumber: "",
					Group_Browse_Path: "",
					Group_Type: "0",
					Group_Browse_Date: times.nowtime(),
					User_Number: "",
				},
				usePhone: "",
				form2: {
					Type: "1",
					Article_Name: "",
					Row_Status: "",
					Group_Seek_Purchase_SerialNumber: "",
					Enterprise_Info_SerialNumber: "",
					page: 1, //页数
					limit: 5, //每页数据条数
				},
				opts: {
					color: [
						"#1890FF",
						"#91CB74",
						"#FAC858",
						"#EE6666",
						"#73C0DE",
						"#3CA272",
						"#FC8452",
						"#9A60B4",
						"#ea7ccc",
					],
					padding: [15, 15, 0, 15],
					enableScroll: false,
					legend: {},
					xAxis: {
						disableGrid: true,
					},
					yAxis: {
						gridType: "dash",
						dashLength: 2,
					},
					extra: {
						area: {
							type: "straight",
							opacity: 0.2,
							addLine: true,
							width: 2,
							gradient: false,
							activeType: "hollow",
						},
					},
				},
			};
		},
		onUnload() {
			this.closeSocket();
		},
		destroyed() {
			this.closeSocket();
		},
		unmounted() {
			this.closeSocket();
		},
		beforeDestroy() {
			this.closeSocket();
			window.removeEventListener("beforeunload", (e) => this.closeSocket(e));
		},
		onHide() {
			this.closeSocket();
		},
		onLoad(e) {
			this.usePhone = uni.getStorageSync("loginInfo").use;
			this.Enterprise_Info_SerialNumber =uni.getStorageSync("loginInfo").enterprise;
			let data = {
				Group_Seek_Purchase_SerialNumber: e.Group_Seek_Purchase_SerialNumber,
			};
			this.Group_Seek_Purchase_SerialNumber = e.Group_Seek_Purchase_SerialNumber;
			this.getGroupSeekProcureID(data);
			this.getData(this.form);
			this.form2.Group_Seek_Purchase_SerialNumber =
				e.Group_Seek_Purchase_SerialNumber;
			this.form2.Enterprise_Info_SerialNumber = e.Enterprise_Info_SerialNumber;
			console.log(this.form2);
			this.getData2(this.form2);
			this.BrowseHistory.User_Number = uni.getStorageSync("loginInfo").use;
			this.BrowseHistory.Group_SerialNumber = e.Group_Seek_Purchase_SerialNumber;
			this.BrowseHistory.Group_Browse_Path = window.location.hash;
			console.log(this.BrowseHistory);
			this.getAddHistory();
		},
		methods: {
			async getAddHistory() {
				let data = {
					Data: JSON.stringify({
						group_browsing_info: [this.BrowseHistory],
					}),
				};
				const res = await getAddAction({
					data,
				});
			},
			async getGroupSeekProcureID(data) {
				const res = await getGroupSeekProcureID({
					data,
				});
				console.log(res);
				if (res.redirect && res.redirect == "REDIRECT") {
					Message({
						message: "登录超时,请重新登录",
						type: "error",
					});
					setTimeout(function() {
						uni.navigateTo({
							url: "/pages/login/login",
						});
					}, 2000);
				} else if (res.Status == "success") {
					this.FormData = res;
					this.Enterprise_Info_SerialNumber2 =res.Data.Enterprise_Info_SerialNumber;
					this.getServerData(res.Data.Category_SerialNumber);
				}
			},
			async getData(data) {
				//分页查询所有采购交易
				const res = await GroupSeekProcureAllAction({
					data,
				});
				if (res.redirect && res.redirect == "REDIRECT") {
					uni.removeStorageSync("loginInfo");
					const res = await GroupSeekProcureAll({
						data,
					});
					if (res.Status == "success") {
						this.tableData = res.tableData;
					}
				} else if (res.Status == "success") {
					this.tableData = res.tableData;
				}
			},
			handleTabs(url) {
				uni.navigateTo({
					url,
				});
			},
			handleOrder() {
				uni.navigateTo({
					url: "/pages/order/purchase-order?Group_Seek_Purchase_SerialNumber=" +
						this.Group_Seek_Purchase_SerialNumber,
				});
			},
			async getServerData(Category_SerialNumber) {
				const res = await GroupMarketQuotations({
					data: {
						Category_SerialNumber
					},
				});
				console.log(res);
				let Market_Data = {
					Daily_average_price:res.Data1.toDay,
					fall:accSub(res.Data1.toDay,res.Data1.yesterday),
					Decline:accSub(res.Data1.toDay,res.Data1.yesterday)/res.Data1.toDay*100,
					max_price: res.Data2.max, //最高价
					min_price:res.Data2.min,
					avg_price:res.Data2.avg
				}
				this.Market_Data = Market_Data
				let categories = [];
				for (let i = 1; i < 13; i++) {
				    categories.push(i);
				}
				let res1 = {
				    categories,
				    series: res.Data,
				};
				this.chartData = JSON.parse(JSON.stringify(res1));
			},
			//打开弹窗与买家沟通
			handleServer(boolen) {
				if (uni.getStorageSync("loginInfo") == "") {
					Message({
						type: "warning",
						message: "登录后可享受全部服务",
					});
					let time = setTimeout(() => {
						uni.navigateTo({
							url: "/pages/login/login",
						});
						clearTimeout(time);
					}, 2000);
					return;
				}
				this.isServer = boolen;
				if (boolen) {
					window.addEventListener("beforeunload", (e) => this.closeSocket(e));
					this.connectSocketInit();
					let data = {
						Group_ID: uni.getStorageSync("loginInfo").use,
						User_Type: "custom",
						Enterprise_Info_SerialNumber: this.Enterprise_Info_SerialNumber2,
					};
					this.getHistoryList(data);
				} else {
					this.closeSocket();
				}
			},
			closeSocket() {
				if (this.is_open_socket) {
					this.socketTask.close();
					clearInterval(this.hearBeatInterval);
				}
			},
			//获取消息历史记录
			async getHistoryList(data) {
				const res = await GroupServesHistory({
					data,
				});
				if (res.redirect && res.redirect == "REDIRECT") {
					console.log(res.redirect);
				} else if (res.Status == "success") {
					console.log(res);
					this.msgList = res.Data;
					this.ScrollBottom();
				}
			},
			//发送的消息添加到消息记录
			async MessagesFileAdd(data) {
				const res = await GoodsFileAdd({
					data,
				});
				if (res.redirect && res.redirect == "REDIRECT") {
					console.log(res.redirect);
				} else if (res.Status == "success") {
					console.log(res);
				}
			},
			//websocket
			connectSocketInit() {
				// 创建一个this.socketTask对象【发送、接收、关闭socket都由这个对象操作】
				this.socketTask = uni.connectSocket({
					url: app.globalData.Domain_Socket +
						"/websocket?userId=Group" +
						this.usePhone,
					success(data) {
						console.log("websocket连接成功");
					},
				});
				// // 消息的发送和接收必须在正常连接打开中,才能发送或接收【否则会失败】
				this.socketTask.onOpen((res) => {
					console.log("WebSocket连接正常打开中...！");
					this.is_open_socket = true;
					// 注：只有连接正常打开中 ，才能正常成功发送消息
					this.hearBeatInterval = setInterval(() => {
						this.socketTask.send({
							data: "ping",
						});
					}, 5000);
					// 注：只有连接正常打开中 ，才能正常收到消息
					this.socketTask.onMessage((res) => {
						console.log(JSON.parse(res.data));
						let time = JSON.parse(res.data).data.time;
						let message = JSON.parse(res.data).data.message;
						this.msgList.push({
							botContent: message,
							userContent: "",
							time,
						});
					});
				});
				// // 这里仅是事件监听【如果socket关闭了会执行】
				this.socketTask.onClose(() => {
					this.is_open_socket = false;
					clearInterval(this.hearBeatInterval);
					console.log("已经被关闭了");
				});
			},
			async getData2(data) {
				const res = await getGroupSeekTransactionAll({
					data,
				});
				let a = 1;
				res.tableData.forEach((item) => {
					item.Seller_Contact =
						item.Seller_Contact.slice(0, 1) +
						(item.Seller_Contact.length == 3 ?
							"*" + item.Seller_Contact.slice(2, 3) :
							"*");
				});
				this.tableData2 = res.tableData;
				this.total = Number(res.limit);
			},
			//发送消息
			handleSend() {
				if (this.chatMsg.trim() == "") {
					Message({
						message: "不可以发送空消息",
						type: "warning",
					});
				}
				if (!this.chatMsg || !/^\s+$/.test(this.chatMsg)) {
					let time = times.nowtime();
					let obj = {
						botContent: "",
						userContent: this.chatMsg,
						time: times.nowtime(),
					};
					this.msgList.push(obj);
					this.ScrollBottom(this.msgList.length);
					if (this.is_open_socket && this.chatMsg != "") {
						this.socketTask.send({
							data: JSON.stringify({
								time,
								message: this.chatMsg,
								userId: uni.getStorageSync("loginInfo").enterprise,
							}),
							async success() {
								console.log("消息发送成功");
							},
						});
						let data = {
							Data: JSON.stringify({
								group_serves_news: [{
									Group_Serves_SerialNumber: "",
									Group_User_Number: uni.getStorageSync("loginInfo").use,
									Group_Serves_ID: this.Enterprise_Info_SerialNumber2,
									Group_Message: this.chatMsg,
									Group_Message_Time: times.nowtime(),
									Group_Message_Type: "",
									Enterprise_Info_SerialNumber: this.Enterprise_Info_SerialNumber2,
									Row_Status: "0",
								}, ],
							}),
						};
						this.MessagesFileAdd(data);
					}
					this.chatMsg = "";
				}
			},
			//滚动到消息底部
			ScrollBottom(i = 0) {
				console.log("滚动了");
				// this.scrollTop = (124-48)*i
				this.$nextTick(() => {
					this.scrollTop = 10000 + i * 10;
				});
			},
			handleDetail(row) {
				if (
					row.Group_Seek_Purchase_SerialNumber ==
					this.Group_Seek_Purchase_SerialNumber
				) {
					Message({
						message: "您已经在该页了",
						type: "warning",
					});
					return;
				}
				uni.navigateTo({
					url: "/pages/detail/purchase-detail?Group_Seek_Purchase_SerialNumber=" +
						row.Group_Seek_Purchase_SerialNumber,
				});
			},
		},
	};
</script>

<style lang="scss">
	.hover {
		cursor: pointer;
	}

	.hover :hover {
		color: #28a745;
	}

	.border-brown {
		border-color: #ddd;
	}

	.box {
		box-sizing: border-box;
	}

	.border-button {
		border-width: 8rpx;
		border-style: solid;
		box-sizing: border-box;
	}

	.current {
		background-color: rgba(0, 0, 0, 0.5);
		position: absolute;
		bottom: 50rpx;
		right: 25rpx;
		justify-content: space-around;
	}

	.serve-mask {
		position: fixed;
		right: 0;
		bottom: 90rpx;
		z-index: 1030;
		width: 800rpx;
		height: 40%;
	}

	.hover:hover {
		cursor: pointer;
	}

	$chatContentbgc: #c2dcff;
	$sendBtnbgc: #4f7df5;

	.scroll-view {
		// background-color: orange;
		background-color: #f6f6f6;

		.chat-body {
			display: flex;
			flex-direction: column;
			padding-top: 23rpx;
			// background-color:skyblue;

			.self {
				justify-content: flex-end;
			}

			.item {
				display: flex;
				padding: 23rpx 30rpx;
				// background-color: greenyellow;

				.right {
					background-color: $chatContentbgc;
				}

				.left {
					background-color: #ffffff;
				}

				// 聊天消息的三角形
				.right::after {
					position: absolute;
					display: inline-block;
					content: "";
					width: 0;
					height: 0;
					left: 100%;
					top: 10px;
					border: 12rpx solid transparent;
					border-left: 12rpx solid $chatContentbgc;
				}

				.left::after {
					position: absolute;
					display: inline-block;
					content: "";
					width: 0;
					height: 0;
					top: 10px;
					right: 100%;
					border: 12rpx solid transparent;
					border-right: 12rpx solid #ffffff;
				}

				.content {
					position: relative;
					max-width: 486rpx;
					border-radius: 8rpx;
					word-wrap: break-word;
					padding: 24rpx 24rpx;
					margin: 0 24rpx;
					border-radius: 5px;
					font-size: 32rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #333333;
					line-height: 42rpx;
				}

				.avatar {
					display: flex;
					justify-content: center;
					width: 78rpx;
					height: 78rpx;
					border-radius: 50rpx;
					overflow: hidden;

					image {
						align-self: center;
					}
				}
			}
		}
	}

	.a::-webkit-scrollbar {
		display: none;
	}

	.hover:hover {
		cursor: pointer;
	}
</style>